import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtList, AtListItem, AtSegmentedControl,AtProgress  } from "taro-ui"
import './xiangmujindu.css'
import reactMixin from 'react-mixin';
import app from '../../../../main.js';
import echarts from '../../resources/ec-canvas/echarts'
import blue from '../../../../img/blue.png'
import green from '../../../../img/green.png'


export default class Xiangmujindu extends Component {

  static defaultProps = {
	  data: []
  }

  config = {
    navigationBarTitleText: '项目进度',
    usingComponents: {
      'ec-canvas': '../../resources/ec-canvas/ec-canvas', // 引入第三方组件ec-canvans
    }
  }

  constructor(props) {
    
    super(...arguments,props);
	// this.state = this.getData();
	this.state = {
	  height: '',
	  width: '',
    canvas: '',
	  ec: {
		onInit: this.initChart.bind(this)
      },
      ec1: {
		onInit: this.initChart1.bind(this)
      },
      XMJDtijiaosuju:[],
      XMJDzongtijiaosuju:[],
      XMJDtijiaoqushi:[],
      XMJDgebingcengtijiaosuju:[],
      GRJDtijiaosuju:[],
      GRJDzongtijiaosuju:[],
      GRJDtijiaoqushi:[],
      GRJDgebingcengtijiaosuju:[],
	}
  }
    

    initChart (canvas, width, height) {    
        let arrA=[];
        let arrB=[];
        let data = {
            project_id: app.project_id 
        }
        const chart = echarts.init(canvas, null, {
        width: width,
        height: height
        });
        
        // console.log(data)
        app.get('web/project/projectProgress', data, function(res){
            for(let i=1; i<13; i++){
                let str='month_'+i;
                arrA.push(res.data.subTrend[str].monthlySubmit)
                arrB.push(res.data.subTrend[str].monthlyPerform)
            }
            canvas.setChart(chart);

            var option = {
        
                textStyle:{
                    color:'#000000'
                },
                color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
                grid: {
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    axisLine:{
                    lineStyle:{
                        color: '#cccccc'
                    }
                    },
                },
                yAxis: {
                    x: 'center',
                    type: 'value',
                    min:0,
                    axisLine:{
                    lineStyle:{
                        color: 'white'
                    }
                    },
                    splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                    }
                    // show: false
                },
                series: [{
                    name: '提交数',
                    type: 'line',
                    // smooth: true,
                    data: arrA
                },{
                    name: '合格数',
                    type: 'line',
                    // smooth: true,
                    data: arrB
                }]
            };    
    
            setTimeout(res=>{           
                chart.setOption(option);
            },500)
        })
        


        return chart;
    }

    initChart1 (canvas, width, height) {
        
        let arrC=[];
        let arrD=[];
        let data = {
            doctor_id:1,
            project_id: app.project_id 
        }
        app.get('web/project/personalProgress', data, function(res){
            for(let i=1; i<13; i++){
                let str='month_'+i;
                arrC.push(res.data.subTrend[str].monthlySubmit)
                arrD.push(res.data.subTrend[str].monthlyPerform)
            }        
        })

        const chart = echarts.init(canvas, null, {
        width: width,
        height: height
        });
        canvas.setChart(chart);
    
        var option = {
    
        textStyle:{
            color:'#000000'
        },
        color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
        grid: {
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisLine:{
            lineStyle:{
                color: '#cccccc'
            }
            },
        },
        yAxis: {
            x: 'center',
            type: 'value',
            min:0,
            axisLine:{
            lineStyle:{
                color: 'white'
            }
            },
            splitLine: {
            lineStyle: {
                type: 'dashed'
            }
            }
            // show: false
        },
        series: [{
            name: '提交数',
            type: 'line',
            // smooth: true,
            data: arrC
        },{
            name: '合格数',
            type: 'line',
            // smooth: true,
            data: arrD
        }]
        };
    
        setTimeout(res=>{
            chart.setOption(option);
        },500)
        
        return chart;
    }

  //get 个人
  getPersonal(){
    let me = this;
    let arrC=[];
    let arrD=[];
      let data = {
        doctor_id:1,
        project_id: this.$router.params.projectId
      }
      app.get('web/project/personalProgress', data, function(res){
        console.log(res)
        me.setState({
            GRJDtijiaosuju:res.data.thisMontData,
            GRJDzongtijiaosuju:res.data.projectData,
            GRJDtijiaoqushi:res.data.subTrend,
            GRJDgebingcengtijiaosuju:res.data.allSubmit
        },()=>{
            for(let i=1; i<13; i++){
              let str='month_'+i;
              arrC.push(me.state.GRJDtijiaoqushi[str].monthlySubmit)
              arrD.push(me.state.GRJDtijiaoqushi[str].monthlyPerform)
            }
            me.setState({
                arrC:arrC,
                arrD:arrD
            })
        })
      })
  }

  //get 项目
  getAll(){
    let me = this;
    let data = {
        project_id: me.$router.params.projectId
      }
      app.get('web/project/projectProgress', data, function(res){

          me.setState({
              XMJDtijiaosuju:res.data.thisMontData,
              XMJDzongtijiaosuju:res.data.projectData,
              XMJDtijiaoqushi:res.data.subTrend,
              XMJDgebingcengtijiaosuju:res.data.allSubmit
          })
      })
  }


  componentWillMount() {
    this.getPersonal();
    this.getAll();
    this.setState({
        current:0
    })
    app.project_id = this.$router.params.projectId
    
  }

  handleClick(value) {
	this.setState({
	  current: value
	})
  }

  medicalDetails = () => {
	app.redirectTo('../chakanbingli1/chakanbingli1');
  }

  render() {
	return (
	  <View className='xiangmujindu'>
		<AtSegmentedControl
		  values={['项目进度', '个人进度']}
		  onClick={this.handleClick.bind(this)}
		  current={this.state.current}
		/>
		{
		  this.state.current === 0
			? <View className='tab-content'>
			  <View className='huanzhenianling'>提交数据</View>
			  <View className='dabox'>
				<View className='box'>
				  <View className='tijiao'>
					<View className='binglishu'>当月提交病历数</View>
					<View className='binglishu1'>{this.state.XMJDtijiaosuju.M_submit}/{this.state.XMJDtijiaosuju.M_case_amount}</View>
					<View className='binglishu2'>当月完成率{this.state.XMJDtijiaosuju.M_percentage}</View>
					<View className='binglishu3'><AtProgress percent={parseInt(this.state.XMJDtijiaosuju.M_percentage)} strokeWidth={6} isHidePercent/></View>
				  </View>
				  <View className='tijiao1'>
				  <View className='binglishu'>当月合格病历数</View>
					<View className='binglishu1'>{this.state.XMJDtijiaosuju.M_perform}/{this.state.XMJDtijiaosuju.M_submit}</View>
					<View className='binglishu2'>当月合格率{this.state.XMJDtijiaosuju.M_passPercent}</View>
					<View className='binglishu3'><AtProgress percent={parseInt(this.state.XMJDtijiaosuju.M_passPercent)} strokeWidth={6} isHidePercent/></View>
				  </View>
				</View>
				<View className='box'>
				  <View className='tijiao2'>
				  <View className='binglishu'>已提交病历总数</View>
					<View className='binglishu1'>{this.state.XMJDzongtijiaosuju.submit}/{this.state.XMJDzongtijiaosuju.case_amount}</View>
					<View className='binglishu2'>总完成率{this.state.XMJDzongtijiaosuju.percentage}</View>
					<View className='binglishu3'><AtProgress percent={parseInt(this.state.XMJDzongtijiaosuju.percentage)} strokeWidth={6} isHidePercent/></View>
				  </View>
				  <View className='tijiao3'>
				  <View className='binglishu'>合格病历总数</View>
					<View className='binglishu1'>{this.state.XMJDzongtijiaosuju.perform}/{this.state.XMJDzongtijiaosuju.submit}</View>
					<View className='binglishu2'>总合格率{this.state.XMJDzongtijiaosuju.passPercent}</View>
					<View className='binglishu3'><AtProgress percent={parseInt(this.state.XMJDzongtijiaosuju.passPercent)} strokeWidth={6} isHidePercent/></View>
				  </View>
				</View>
			  </View>
			  <View className='content'>
				<View className='huanzhenianling'>提交趋势</View>

					<View className='MyCanvas'>
						<ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>
					</View>

					
					<View className='btnBox'>
					<View className='left'>
						<Image className='img1' src={blue}></Image>
						<View className='text'> 提交数 </View>
					</View>
					<View className='right'>
						<Image className='img2' src={green}></Image>
						<View className='text'> 合格数 </View>
					</View>
					</View>

				</View>
			  <View className='content'>
				<View className='huanzhenianling'>各病程提交数据</View>
				<View className='huanzhenianling2'>首诊提交病历数</View>
				<View className='huanzhenianling1'>
				  <View className='shuzhi1'><AtProgress percent={100} strokeWidth={6} isHidePercent/></View>
				  <View className='shuzhi'>{this.state.XMJDgebingcengtijiaosuju.firstDiagnose}</View>
				</View>
				<View className='huanzhenianling2'>一次复诊提交病历数</View>
				<View className='huanzhenianling1'>
				  <View className='shuzhi1'><AtProgress percent={this.state.XMJDgebingcengtijiaosuju.oneDiagnose/this.state.XMJDgebingcengtijiaosuju.firstDiagnose*100} strokeWidth={6} isHidePercent/></View>
				  <View className='shuzhi'>{this.state.XMJDgebingcengtijiaosuju.oneDiagnose}</View>
				</View>
				<View className='huanzhenianling2'>二次复诊提交病历数</View>
				<View className='huanzhenianling1'>
				  <View className='shuzhi1'><AtProgress percent={this.state.XMJDgebingcengtijiaosuju.twoDiagnose/this.state.XMJDgebingcengtijiaosuju.firstDiagnose*100} strokeWidth={6} isHidePercent/></View>
				  <View className='shuzhi'>{this.state.XMJDgebingcengtijiaosuju.twoDiagnose}</View>
				</View>
			  </View>
			</View>
			: null
		}
		{
		  this.state.current === 1
			? <View className='tab-content'>
            <View className='huanzhenianling'>提交数据</View>
            <View className='dabox'>
              <View className='box'>
                <View className='tijiao'>
                  <View className='binglishu'>当月提交病历数</View>
                  <View className='binglishu1'>{this.state.GRJDtijiaosuju.M_submit}/{this.state.GRJDtijiaosuju.M_case_amount}</View>
                  <View className='binglishu2'>当月完成率{this.state.GRJDtijiaosuju.M_percentage}</View>
                  <View className='binglishu3'><AtProgress percent={parseInt(this.state.GRJDtijiaosuju.M_percentage)} strokeWidth={6} isHidePercent/></View>
                </View>
                <View className='tijiao1'>
                <View className='binglishu'>当月合格病历数</View>
                  <View className='binglishu1'>{this.state.GRJDtijiaosuju.M_perform}/{this.state.GRJDtijiaosuju.M_submit}</View>
                  <View className='binglishu2'>当月合格率{this.state.GRJDtijiaosuju.M_passPercent}</View>
                  <View className='binglishu3'><AtProgress percent={parseInt(this.state.GRJDtijiaosuju.M_passPercent)} strokeWidth={6} isHidePercent/></View>
                </View>
              </View>
              <View className='box'>
                <View className='tijiao2'>
                <View className='binglishu'>已提交病历总数</View>
                  <View className='binglishu1'>{this.state.GRJDzongtijiaosuju.submit}/{this.state.GRJDzongtijiaosuju.cases_amount}</View>
                  <View className='binglishu2'>总完成率{this.state.GRJDzongtijiaosuju.percentage}</View>
                  <View className='binglishu3'><AtProgress percent={parseInt(this.state.GRJDzongtijiaosuju.percentage)} strokeWidth={6} isHidePercent/></View>
                </View>
                <View className='tijiao3'>
                <View className='binglishu'>合格病历总数</View>
                  <View className='binglishu1'>{this.state.GRJDzongtijiaosuju.perform}/{this.state.GRJDzongtijiaosuju.submit}</View>
                  <View className='binglishu2'>总合格率{this.state.GRJDzongtijiaosuju.passPercent}</View>
                  <View className='binglishu3'><AtProgress percent={parseInt(this.state.GRJDzongtijiaosuju.passPercent)} strokeWidth={6} isHidePercent/></View>
                </View>
              </View>
            </View>
            <View className='content'>
              <View className='huanzhenianling'>提交趋势</View>

                  <View className='MyCanvas'>
                      <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec1}></ec-canvas>
                  </View>

                  
                  <View className='btnBox'>
                  <View className='left'>
                      <Image className='img1' src={blue}></Image>
                      <View className='text'> 提交数 </View>
                  </View>
                  <View className='right'>
                      <Image className='img2' src={green}></Image>
                      <View className='text'> 合格数 </View>
                  </View>
                  </View>

              </View>
            <View className='content'>
              <View className='huanzhenianling'>各病程提交数据</View>
              <View className='huanzhenianling2'>首诊提交病历数</View>
              <View className='huanzhenianling1'>
                <View className='shuzhi1'><AtProgress percent={100} strokeWidth={6} isHidePercent/></View>
                <View className='shuzhi'>{this.state.GRJDgebingcengtijiaosuju.firstDiagnose}</View>
              </View>
              <View className='huanzhenianling2'>一次复诊提交病历数</View>
              <View className='huanzhenianling1'>
                <View className='shuzhi1'><AtProgress percent={this.state.GRJDgebingcengtijiaosuju.oneDiagnose/this.state.GRJDgebingcengtijiaosuju.firstDiagnose*100} strokeWidth={6} isHidePercent/></View>
                <View className='shuzhi'>{this.state.GRJDgebingcengtijiaosuju.oneDiagnose}</View>
              </View>
              <View className='huanzhenianling2'>二次复诊提交病历数</View>
              <View className='huanzhenianling1'>
                <View className='shuzhi1'><AtProgress percent={this.state.GRJDgebingcengtijiaosuju.twoDiagnose/this.state.GRJDgebingcengtijiaosuju.firstDiagnose*100} strokeWidth={6} isHidePercent/></View>
                <View className='shuzhi'>{this.state.GRJDgebingcengtijiaosuju.twoDiagnose}</View>
              </View>
            </View>
          </View>
			: null
		}

	  </View>
	)
  }
}
// reactMixin.onClass(xiangmujindu, myJs);
